<div class="card top-marg-15 bottom-marg-15">
    <div class="card-body cart-body">
        <h5 class="card-title">{{ @root.__ "Cart contents" }}</h5>
        <div class="cartBodyWrapper">
            {{#each @root.session.cart}}
            <div class="d-flex flex-row bottom-pad-15">
                <div class="p-2 cart-product">
                    <div class="row h-200">
                        <div class="col-4 col-md-3 no-pad-left">
                            {{#if productImage}}
                            <img class="img-fluid" src="{{this.productImage}}" alt="{{this.title}} product image">
                            {{else}}
                            <img class="img-fluid" src="/uploads/placeholder.png" alt="{{this.title}} product image"> 
                            {{/if}}
                        </div>
                        <div class="col-8 col-md-9">
                            <div class="row">
                                <div class="col-12 no-pad-left mt-md-4">
                                    <h6><a href="/product/{{this.link}}">{{this.title}}</a></h6>
                                    {{#if this.variantId}}
                                    <strong>Option:</strong> {{this.variantTitle}}
                                    {{/if}}
                                </div>
                                {{#ifCond @root.cartReadOnly '!=' true}}
                                <div class="col-12 col-md-6 no-pad-left mb-2">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <button class="btn btn-primary btn-qty-minus" type="button">-</button>
                                        </div>
                                        <input type="number" 
                                            class="form-control cart-product-quantity text-center" 
                                            data-cartid="{{@key}}" 
                                            data-id="{{../this.productId}}"
                                            maxlength="2" 
                                            value="{{../this.quantity}}"
                                        >
                                        <div class="input-group-append">
                                            <button class="btn btn-primary btn-qty-add" type="button">+</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4 col-md-2 no-pad-left">
                                    <button class="btn btn-danger btn-delete-from-cart" data-cartid="{{@key}}" type="button">{{{feather 'trash-2'}}}</button>
                                </div>
                                {{else}}
                                <div class="col-12 col-md-8 no-pad-left mb-2"></div>
                                {{/ifCond}}
                                <div class="col-8 col-md-4 align-self-center text-right">
                                    <strong class="my-auto">{{currencySymbol @root.config.currencySymbol}}{{formatAmount this.totalItemPrice}}</strong>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{/each}}
        </div>
        <div class="cartTotalsWrapper">
            {{#if @root.session.cart}}
            <div class="d-flex flex-row">
                <div class="cart-contents-shipping col-md-12 no-pad-right">
                    {{#ifCond @root.session.totalCartShipping '>' 0}}
                    <div class="text-right">
                        {{@root.session.shippingMessage}}: <strong id="shipping-amount">{{currencySymbol @root.config.currencySymbol}}{{formatAmount @root.session.totalCartShipping}}</strong>
                    </div>
                    {{else}}
                    <div class="text-right">
                        <span id="shipping-amount">{{@root.session.shippingMessage}}</span>
                    </div>
                    {{/ifCond}}
                    {{#ifCond @root.session.totalCartDiscount '>' 0}}
                    <div class="text-right">
                        Discount: <strong id="discount-amount">{{currencySymbol @root.config.currencySymbol}}{{formatAmount @root.session.totalCartDiscount}}</strong>
                    </div>
                    {{/ifCond}}
                    <div class="text-right">
                        Total:
                        <strong id="total-cart-amount">{{currencySymbol @root.config.currencySymbol}}{{formatAmount @root.session.totalCartAmount}}</strong>
                    </div>
                </div>
            </div>
            {{else}}
            <div id="cart-empty" class="d-flex flex-row">
                <div class="cart-contents-shipping col-md-12 no-pad-left">
                    Cart empty
                </div>
            </div>
            {{/if}}
        </div>
    </div>
</div>